<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
        <DeptDangerousSrc :id="businessId" :type="'edit'" ref="contingencyNoticeRef" @dataEmits="getData"></DeptDangerousSrc>
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="流程记录" en="Process Record"/></template>
        <ProcessHistory :processInsId="processInsId" />
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="流程图" en="Process Chart"/></template>
        <ProcessView :processInsId="processInsId" />
      </el-tab-pane>
    </el-tabs>
    <StatusBar
      :id="formData.id"
      :status="formData.zt"
      :isValid="formData.yxbs"
    />
    <PageBottom>
      <vp-btn-save :loading="submitLoading" @click="handleSave"/>
      <VpProcessToolBar 
          :process-ins-id="processInsId" 
          :task-id="taskId" 
          :loading="submitLoading" 
          :set-loading-fn="(_loading: boolean) => { submitLoading = _loading }"
          :before-show-fn="beforeShowFn" 
          :after-agree-fn="afterAgreeFn"
          :after-cancel-fn="afterCancelFn"
          :show-cancel="true"
          :show-reject="false"
      />
    </PageBottom>
  </div>
</template>
<script lang="ts">
import { ElMessage } from "element-plus";
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs
} from "vue";
import { useRoute } from "vue-router";
import DeptDangerousSrc from "./DeptDangerousSrc.vue";
import RcList from "/@/components/vp/operationRecord/VpOperationRecordCard.vue";
import ProcessHandle from "/@/components/vp/workflow/VpProcessHandle.vue";
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from "/@/components/vp/workflow/ProcessView.vue";
import request from "/@/utils/request";
import PageBottom from '/@/components/vp/PageBottom/index.vue';
import mittBus from '/@/utils/mitt';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import VpProcessToolBar from '/@/components/vp/workflow/VpProcessToolBar.vue';

export default defineComponent({
  name: "reeditDeptDangerousSrc",
  props: {
    businessId: String,
    taskId: String,
    processInsId: String,
  },
  components: {
    ProcessHistory,
    ProcessView,
    ProcessHandle,
    DeptDangerousSrc,
    RcList,
    PageBottom, 
    StatusBar, 
    VpProcessToolBar
  },
  setup(props, context) {
    const state = reactive({
      loading: false,
      submitLoading: false,
      formData: {
        id: "",
        zt: 10,
        yxbs: 1,
        sjbb: 1,
        processHandle: {},
      },
      type: "edit",
    });

    const loadWorkflow = () => {};
    onMounted(() => {
      loadWorkflow();
    });
    const route = useRoute();
    const processHandleRef = ref();
    const contingencyNoticeRef = ref();

    const getData = (data: any) => {
      state.formData = data;
    };

    const handleSave = () => {
        state.submitLoading = true;
        var processHandle = {
          businessId: props.businessId,
          taskId: props.taskId,
          processInsId: props.processInsId,
        };
        contingencyNoticeRef.value.getData(10).then((data: any)=>{
            request.post("/safe/deptDangerousSrc/reeditSave", {
                ...data,
                processHandle,
            }).then(() => {
              mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
              ElMessage.success("办理完毕");
            }).finally(()=>{
                state.submitLoading = false;
            })
        }).catch(()=>{state.submitLoading = false;});
    };

    //同意前操作
    const beforeShowFn = () => {
        state.submitLoading = true;
        return contingencyNoticeRef.value.getData().finally(()=>{state.submitLoading = false;});
    }

    //同意后操作
    const afterAgreeFn = (processHandle: any) => { 
        state.submitLoading = true;
        contingencyNoticeRef.value.getData().then((data: any) =>{
            request.post('/safe/deptDangerousSrc/reedit', {
                ...data,
                processHandle: {
                    processInsId: props.processInsId,
                    taskId: props.taskId,
                    ...processHandle,
                }
            }).then(()=>{
                mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
                ElMessage.success("办理完毕/Completed Processing");
            }).catch(()=>{
            }).finally(()=>{
                state.submitLoading = false;
            })
        }).catch(()=>{state.submitLoading = false;});
    }

    // 中止后操作
    const afterCancelFn = (processHandle: any) => { 
        state.submitLoading = true;
        request.post(`/safe/deptDangerousSrc/cancle/${props.businessId}/${state.formData.sjbb}`).then(()=>{
            mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
            ElMessage.success("办理完毕/Completed Processing");
        }).catch(()=>{
        }).finally(()=>{
            state.submitLoading = false;
        })
    }

    return {
      ...toRefs(state),
      ...toRefs(props),
      handleSave,
      processHandleRef,
      contingencyNoticeRef,
      beforeShowFn,
      afterAgreeFn,
      afterCancelFn,
      getData,
    };
  },
});
</script>
